var _Vue= null
export default class VueRouter {
  static install(Vue) {
    // 1.判断插件是否依旧安装
    if (VueRouter.install.installed) { return }
    VueRouter.install.installed=true;
    // 2、把Vue构造函数记录到全局变量
    _Vue=Vue
    // 3、把创建的Vue实例时候传入的router对象挂载到Vue实例上
    // 混入
    _Vue.mixin({
      beforeCreate() {
        if (this.$options.router){
          _Vue.prototype.$router=this.$options.router
          this.$options.router.init()
        }
      }
    })
  }

  constructor ( options ) {
    this.options= options
    this.routeMap= {}
    this.data=_Vue.observable({
      current:'/'
    })
  }
  init () {
    this.createRouteMap()
    this.initComponents(_Vue)
    this.initEvent()
  }
  // 遍历所有的路由规则，形成键值对形式，存储到routeMap中
  createRouteMap () {
    this.options.routes.forEach( route =>{
      this.routeMap[route.path]=route.component
    })
  }
  initComponents ( Vue ) {
    Vue.component('router-link',{
      props:{
        to: String
      },
      // template:`<a :href="to"><slot></slot></a>`  // 非完整版会报错，参考官方的runtimeCompiler
      render (h) {
        return h ('a',{
          attrs:{
            href: `/#${this.to}`
          }
        },[this.$slots.default])
      }
    })
    const self=this
    Vue.component('router-view',{
      render (h) {
        let component=self.routeMap[self.data.current]
        return h(component)
      }
    })
  }
  initEvent () {
    window.addEventListener('hashchange', () => {
      console.log(window.location.hash)
    }) // 初始渲染不会触发hashchange，但是页面url需改变，故current应无论那种情况都添加
    this.data.current = window.location.hash.substr(1)
  }
}
